<template>
  <div class="corp-index-page">
    <Map :markers="markers"></Map>
    <Drawer
      :slotDefaultLength="3"
      direction="left"
      ref="corpDrawerLeft"
      :styles="styles"
      @on-off="handleTrigger">
      <group-overview></group-overview>
      <real-name></real-name>
    </Drawer>
    <Drawer
      :slotDefaultLength="3"
      direction="right"
      ref="corpDrawerRight"
      :styles="styles"
      @on-off="handleTrigger">
      <environment></environment>
      <eprogress></eprogress>
    </Drawer>
  </div>
</template>

<script>
import Drawer from '@/components/public/Drawer';
import Map from '@/components/corp/Map';
import GroupOverview from '@/components/corp/GroupOverview';
import RealName from '@/components/corp/RealName';
import environment from '@/components/corp/environment';
import Eprogress from '@/components/corp/progress';

// 驾驶舱
export default {
  name: 'corpIndex',
  data() {
    return {
      styles: {
        height: `calc(100% - ${this.$setRem(78)})`,
        width: this.$setRem(450),
        padding: `${this.$setRem(30)} 0`,
      }
    };
  },
  computed: {
    // 项目信息
    projectInfo() {
      return this.$store.state.projectInfo || [];
    },
    // 项目标记点
    markers() {
      return this.projectInfo.map(item => {
        const { lat, lng, projectName } = item;
        const options = {
          width: 100,
          height: 40
        };
        return {
          lat,
          lng,
          options,
          infoEvt: this.handleInfoWindow,
          message: projectName
        };
      });
    }
  },
  methods: {
    /**
     * 显示、隐藏侧边栏
     * @param  value {Boolean}
     */
    handleTrigger(value) {
      this.$refs.corpDrawerLeft.trigger(value);
      this.$refs.corpDrawerRight.trigger(value);
    },
    handleInfoWindow(infoWindow) {
      // document.querySelector('.BMap_bubble_pop').onclick = (e) => {};
    }
  },
  components: {
    Map,
    Drawer,
    RealName,
    GroupOverview,
    environment,
    Eprogress
  }
};
</script>

<style lang="scss" scoped>
.corp-index-page {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .drawer-comp {
    /deep/ .btn-content {
      &_left {
        right: -48px;
      }
      &_right {
        left: -48px;
      }
    }
    /deep/.drawer-comp-content {
      display: flex;
      flex-direction: column;
    }
    &_right /deep/.drawer-comp-content {
      padding-right: 30px;
    }
    &_left /deep/.drawer-comp-content {
      padding-left: 30px;
    }
  }
}
</style>
